{template 'header'}
<link rel="stylesheet" href="{MODULE_URL}assets/css/pic_look.css">
<style>
    .up_loader_text {
        background: #fff;
        margin-top: -10px;
        padding-top: 10px;
        padding-bottom: 5%;
    }

    .text_red {
        color: #dd524d;
        margin: 10px;
    }

    .case img {
        width: 100%;
    }

    .case div {
        padding: 10px;
    }
    .case img{
        height: 16rem;
    }
    #uploadForm img {
        border: solid 1px #d7d7d7;
        width: 20vw;
        height: 20vw;
    }
    #uploadForm .hied_input {
        display: none;
        position: fixed;
        top: -99999999999px;
    }

    #uploadForm #pick_img_wrap div {
        padding: 1vh;
        float: left;
    }
    .mui-btn-block{
        font-size: 16px;
        margin: 10px auto;
        width: 96%;
        padding: 8px 0;
    }
    .uploder{
        background: #fff;
        margin-top: 2vh;
    }
    .uploder > p{
        padding-left: 2vw;
        padding-top: 2vw;
    }
    #uploadForm textarea{
        width: 96%;
        margin: 0 auto;
        display: block;
        height: 20vh;
        font-size: 12px;
    }
    #pick_img_file{
        position: relative;

    }
    #pick_img_file input{
        position: absolute;
        opacity: 0;
        height: 30vh;
        width: 30vw;
    }
    #pick_img_file{
        width: 20vw;
        height: 20vw;
        background:url("{MODULE_URL}assets/img/pic_img.png") center !important;
        border: 1px solid #d7d7d7;
        float: left;
        margin-top: 2vw;
        overflow: hidden;
        margin-left: 2vw;
    }
</style>
</head>
<body>
<!-- 头部 结束 -->
<div class="mui-content">
    <!-- 要求文本开始 -->
    <div class="up_loader_text">
        <div class="mui-content-padded">
            <p>要求:</p>
            <p>1.要求对所有人可见，保存图片后上传朋友圈并加上文字。</p>
            <p>2.上传朋友圈2小时以后截图上传即可，审核通过后就可以得到相应奖励。</p>
        </div>
    </div>
    <!-- 要求文本结束 -->
    <!-- 上传模块开始 -->
    <div class="uploder mui-clearfix">
        <p>上传凭证：</p>
        <form id='uploadForm' enctype="multipart/form-data"  onsubmit="return false">
            <textarea placeholder="请填写文字凭证"></textarea>
            <div class="mui-clearfix">
                <div id="pick_img_wrap">

                </div>
                <div id="pick_img_file" class="pick_img">
                    <input class="weui_uploader_input js_file" type="file" accept="image/jpg,image/jpeg,image/png" multiple="" id="pic">
                </div>
                <div class="input-list"></div>
            </div>
            <button type="button" value="上传凭证" class="mui-btn mui-btn-primary mui-btn-block" id="uploader_btn">上传凭证</button>
        </form>
    </div>
    <!-- 上传模块结束 -->
</div>
<script src="{MODULE_URL}assets/js/jquery.min.js"></script>
<script src="{MODULE_URL}assets/js/mui.min.js"></script>
<!-- 以上为引入第三方插件 -->
<script>

    $(function () {
        // 允许上传的图片类型
        var allowTypes = ['image/jpg', 'image/jpeg', 'image/png'];
        // 1024KB，也就是 1MB
        var maxSize = 1024 * 1024;
        // 图片最大宽度
        var maxWidth = 800;
        // 最大上传图片数量
        var maxCount = 4;
        $('#pic').on('change', function () {
            var files = event.target.files;
            // console.log(files.length);
            // 如果没有选中文件，直接返回
            if (files.length === 0 || files.length + 1 > maxCount) {
                mui.alert('请小于4张');
                return;
            }
            for (var i = 0, len = files.length; i < len; i++) {
                var file = files[i];
                var reader = new FileReader();
                // 如果类型不在允许的类型范围内
                if (allowTypes.indexOf(file.type) === -1) {
                    mui.alert('该类型不允许上传');
                    continue;
                }
                if (file.size > maxSize) {
                    mui.alert('图片太大，不允许上传');
                    continue;
                }
                if ($('.weui_uploader_file').length >= maxCount) {
                    mui.alert('最多只能上传' + maxCount + '张图片');
                    return;
                }
                reader.onload = function (e) {
                    var img = new Image();
                    img.onload = function () {
                        // 不要超出最大宽度
                        var w = Math.min(maxWidth, img.width);
                        // 高度按比例计算
                        var h = img.height * (w / img.width);
                        var canvas = document.createElement('canvas');
                        var ctx = canvas.getContext('2d');
                        // 设置 canvas 的宽度和高度
                        canvas.width = w;
                        canvas.height = h;
                        ctx.drawImage(img, 0, 0, w, h);
                        var base64 = canvas.toDataURL('image/png');
                        var html = '<input name="pics[]" type="hidden" value="'+base64+'">';
                        $('.input-list').append(html)
                        console.log($(':input[name="pics[]"]').val());
                        // 插入到预览区
                        var $preview = $("<div class='pick_img del_img' > <img src=" + base64 + " ></div>");
                        $('#pick_img_wrap').append($preview);

                    };
                    img.src = e.target.result;
                    var id = $(':input[name="id"]').val();
                    id = id ? id : 0;
                    // $.post("/app/vip/uptransfershot", { img: e.target.result,id:id},function(res){
                    //     if(res.code == 1){
                    //         $(':input[name="id"]').val(res.id);
                    //         console.log(res.id);
                    //         $.toptip(res.msg, 'success');
                    //     }else{
                    //         $.toptip(res.msg, 'error');
                    //     }
                    // },'json');
                };
                reader.readAsDataURL(file);
            }
        })
    });
    //上传图片的
    // var len = 4;
    // var pick_img_html = "<div class='pick_img' onclick='pick_img($(this).index())'><img src='{MODULE_URL}assets/img/pic_img.png' class='mui-media-object'></div>";
    // function pick_img(num , s){
    //     var input_file_html = "<input type='file' name='uploader_pic"+(num+1)+"' class='hied_input' accept='image/*'>";
    //     $('#pick_img_file').children('input').eq(num).click();
    //     $('#pick_img_file').children('input').eq(num).on('change',function (e) {
    //         var str = $('#pick_img_file').children('input').eq(num).val();
    //         if(str != ''){
    //             $('.pick_img').eq(num).children('img').attr("src", URL.createObjectURL(e.target.files[0]));
    //             $('.pick_img').eq(num).attr('onclick','remove_pic($(this).index())');
    //             if($('.pick_img').length < 4){
    //                   if(s){
    //                      console.log(s);
    //                      return
    //                   }else {
    //                       $('#pick_img_wrap').append(pick_img_html);
    //                       $('#pick_img_file').append(input_file_html);
    //                   }
    //
    //             }
    //         }
    //     });
    // }
    // //移除图片
    // var nomale_src ="{MODULE_URL}assets/img/pic_img.png";
    // function remove_pic(pic_index){
    //     mui.confirm('确定删除这张图片吗?','警告',['否','是'],function (e) {
    //        if(e.index == 1){
    //             $('.pick_img').eq(pic_index).children('img').attr("src", nomale_src);
    //             $('#pick_img_file').children('input').eq(pic_index).val('');
    //             $('.pick_img').eq(pic_index).attr('onclick','pick_img($(this).index(),false)');
    //         }
    //     })
    // }

    //删除图片
    $(document).on('click','.del_img',function (){
        var indexx = $(this).index();
        console.log(indexx);
        mui.confirm('确认删除吗','警告',['是','否'],function (e) {
            if(e.index == 0){
                $('.del_img').eq(indexx).remove();
                $('.input-list').children('input').eq(indexx).remove();
            }
        })
    });

    //使用axja 上传
    $("#uploader_btn").click(function () {
        var formData = new FormData($('#uploadForm')[0]); //处理为fromData
        var taskid = '{$id}';
        $.ajax({
            url: '{php echo $this->createMobileUrl("core",array("op"=>"task_submit","extra"=>"upload"))}',
            type: 'POST',
            data: formData,
            dataType:"json",
            async: true,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
                if(data.code == 1){
                    submitTask(data.data)
                }else{
                    mui.toast(data.msg)
                }
            }
        })
    });
    function submitTask(picarr){
        picarr = picarr.join(';');
        var taskid = '{$taskid}';
        var list_url = '{php echo $this->createMobileUrl("core",array("op"=>"task_submit"))}';
        mui.ajax(list_url,{
            data:{picarr,taskid},
            dataType:'json',//服务器返回json格式数据
            type:'post',//HTTP请求类型
            async: false,
            timeout:10000,//超时时间设置为10秒；
            success:function(ret){
                if(ret.code){
                    mui.alert(ret.msg,'',function () {
                        location.href = '{php echo $this->createMobileUrl("member",array("op"=>"task"))}'
                    })
                }else{
                    mui.toast(ret.msg)
                }
            },
            error:function(xhr,type,errorThrown){
                //异常处理；
                mui.toast("服务器出现异常，请稍后重试");
            }
        });
    }
</script>
</body>
</html>